<!DOCTYPE html>
<html>
<head>
    <title>地震信息监控</title>
    {% include 'admin/common/header.html' %}
    <link rel="stylesheet" href="{{ url_for('static', filename='/admin/admin/css/other/console3.css') }}"/>

    <!-- 主 题 更 换 -->
    <style id="pearadmin-bg-color"></style>

</head>
<body class="pear-container">
<div>
    <div class="layui-row layui-col-space10">
        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header">紧急逃生出口数</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value1">
                            0
                        </div>
                        <div class="layui-col-xs4 layui-col-md4 top-panel-tips">
                            <svg t="1655964061349" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                 xmlns="http://www.w3.org/2000/svg" p-id="1703" width="200" height="200">
                                <path d="M770.83 769.31H307.66c-21.55 0-39.09-17.54-39.09-39.09V328.05c0-21.4 17.41-38.81 38.81-38.81h462.71c13.81 0 25-11.19 25-25s-11.19-25-25-25H307.38c-48.97 0-88.81 39.84-88.81 88.81v402.18c0 49.12 39.96 89.09 89.09 89.09h463.16c13.81 0 25-11.19 25-25 0.01-13.81-11.19-25.01-24.99-25.01z" fill="#74DBD1" p-id="1704"></path>
                                <path d="M676.14 521.7a24.998 24.998 0 0 0 17.68 7.32c1.78 0 3.58-0.19 5.36-0.58l48.39-10.62c13.49-2.96 22.02-16.29 19.06-29.78-2.96-13.49-16.3-22.02-29.78-19.06l-35.03 7.69-51.9-51.9c-1.3-1.3-2.71-2.42-4.2-3.37a24.896 24.896 0 0 0-7.26-4.59c-6.77-2.79-14.05-2.39-20.19 0.5-0.64 0.19-1.28 0.4-1.91 0.65l-130.78 50.77c-12.87 5-19.26 19.48-14.26 32.35 3.84 9.9 13.3 15.96 23.31 15.96 3.01 0 6.07-0.55 9.04-1.7l79.89-31.01-66.69 161.66-54.1-23.08c-12.7-5.42-27.39 0.48-32.81 13.18-5.42 12.7 0.48 27.39 13.18 32.8l77.37 33.01c3.13 1.34 6.47 2.01 9.81 2.01a24.993 24.993 0 0 0 23.11-15.47l40.85-99.04 43.73 4.69 49.1 120.52c3.95 9.7 13.3 15.57 23.16 15.57 3.14 0 6.34-0.6 9.42-1.85 12.79-5.21 18.93-19.8 13.72-32.58L678.67 561.4a24.973 24.973 0 0 0-20.49-15.42l-44.04-4.72 23.8-57.7 38.2 38.14z" fill="#74DBD1" p-id="1705"></path>
                                <path d="M644.007536 403.933869a38.39 38.39 0 1 0 29.382434-70.935471 38.39 38.39 0 1 0-29.382434 70.935471Z" fill="#74DBD1" p-id="1706"></path>
                                <path d="M401.34 438.82c13.81 0 25-11.19 25-25s-11.19-25-25-25h-51.16c-13.81 0-25 11.19-25 25s11.19 25 25 25h51.16zM294.18 500.78c0 13.81 11.19 25 25 25H421.5c13.81 0 25-11.19 25-25s-11.19-25-25-25H319.18c-13.8 0-25 11.19-25 25zM354.66 613.74h66.84c13.81 0 25-11.19 25-25s-11.19-25-25-25h-66.84c-13.81 0-25 11.19-25 25s11.19 25 25 25z" fill="#74DBD1" p-id="1707"></path>

                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header">紧急疏散区域数</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value2">
                            0
                        </div>
                        <div class="layui-col-xs4 layui-col-md4 top-panel-tips">
                            <svg t="1655964769981" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                 xmlns="http://www.w3.org/2000/svg" p-id="11012" width="200" height="200">
                                <path d="M532.1 905.6s-312-223.1-312-468c0-183.3 153.1-312.1 312-312 166.6 0.1 312 131.1 312 312 0.1 245-312 468-312 468z" fill="#80CBC4" p-id="11013"></path>
                                <path d="M532.1 921l-7.3-5.2c-3.2-2.3-80-57.5-158-143.9-46-50.9-82.7-102-109-151.9-33.3-63-50.2-124.4-50.2-182.3 0-89.5 35.6-172.5 100.3-233.8 60.8-57.6 142.5-90.7 224.1-90.7h0.1c42.7 0 84.3 8.2 123.8 24.3 38.7 15.8 73.5 38.5 103.4 67.5 62.8 60.8 97.3 143.5 97.3 232.8 0 57.9-16.9 119.3-50.2 182.3-26.4 49.9-63 101-109 151.9-78 86.4-154.8 141.6-158 143.9l-7.3 5.1z m-7.2-25.5z m7.1-757.4c-75.3 0-150.7 30.6-206.9 83.8-59.6 56.5-92.5 133.1-92.5 215.7 0 122.4 82.9 240 152.5 317.2 62.6 69.4 126 119.4 147.1 135.3 21-15.9 84.4-65.9 147.1-135.3 69.6-77.1 152.5-194.7 152.5-317.2 0-167.9-131.6-299.5-299.5-299.5h-0.3z" fill="#40241A" p-id="11014"></path>
                                <path d="M849 913.4H543c-1.7 0-3-1.3-3-3V907c0-1.7 1.3-3 3-3h306c1.7 0 3 1.3 3 3v3.4c0 1.7-1.4 3-3 3z" fill="#FFFFFF" p-id="11015"></path>
                                <path d="M849 925.9H543c-8.5 0-15.5-7-15.5-15.5V907c0-8.5 7-15.5 15.5-15.5h306c8.5 0 15.5 7 15.5 15.5v3.4c0 8.6-7 15.5-15.5 15.5zM383.5 915H264.7c-1.7 0-3-1.3-3-3v-3.4c0-1.7 1.3-3 3-3h118.8c1.7 0 3 1.3 3 3v3.4c0 1.7-1.3 3-3 3z" fill="#40220F" p-id="11016"></path>
                                <path d="M383.5 927.5H264.7c-8.5 0-15.5-7-15.5-15.5v-3.4c0-8.5 7-15.5 15.5-15.5h118.8c8.5 0 15.5 7 15.5 15.5v3.4c0 8.5-6.9 15.5-15.5 15.5z" fill="#40220F" p-id="11017"></path>
                                <path d="M533.6 138.5c-1.5 0-3 0-4.5 0.1l0.8 747.7c2.9 2.2 4.5 3.3 4.5 3.3s300.6-219 300.6-453c0-172.9-140.5-298-301.4-298.1z" fill="#B2DFDB" p-id="11018"></path>
                                <path d="M529 560.8c-54.5 0-98.7-44.2-98.7-98.7s44.2-98.7 98.7-98.7 98.7 44.2 98.7 98.7-44.2 98.7-98.7 98.7z" fill="#FFF176" p-id="11019"></path>
                                <path d="M529 573.3c-61.3 0-111.2-49.9-111.2-111.2 0-61.3 49.9-111.2 111.2-111.2 61.3 0 111.2 49.9 111.2 111.2 0 61.3-49.9 111.2-111.2 111.2z m0-197.4c-47.5 0-86.2 38.7-86.2 86.2s38.7 86.2 86.2 86.2 86.2-38.7 86.2-86.2-38.6-86.2-86.2-86.2z" fill="#40220F" p-id="11020"></path>
                                <path d="M529 376.1v171.2c47.8 0 86.5-38.3 86.5-85.6 0-47.2-38.7-85.6-86.5-85.6z" fill="#FFF9C4" p-id="11021"></path>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header">紧急救援人员数</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value3">
                            0
                        </div>
                        <div class="layui-col-xs4 layui-col-md4  top-panel-tips">
                            <svg t="1655964363416" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                 xmlns="http://www.w3.org/2000/svg" p-id="4544" width="200" height="200">
                                <path d="M896.198685 417.794485c4.826235-4.363842 7.860695-10.46166 7.860695-17.281968 0-13.207123-11.314199-23.936105-25.287162-23.936105-1.329382 0-2.59374 0.173398-3.879773 0.36847l-0.180623-0.36847H638.992126l-78.570824-218.553326h-0.296221c-2.413118-11.046877-13.488895-19.42054-26.818841-19.42054-13.322722 0-24.398499 8.359213-26.811616 19.42054h-0.252872l-72.249033 218.553326H171.179635l-0.093924 0.455169c-11.668219 2.131346-20.497051 11.819942-20.497051 23.480936 0 9.796969 6.249541 18.213981 15.186747 21.905907L356.317783 596.921514l-101.148647 288.996133h65.363701l112.918014-319.579149-104.602151-100.281658a13.748991 13.748991 0 0 1-8.330313-12.593007c0-6.70471 4.840685-12.253436 11.256399-13.481669l0.050575-0.260097h144.274094l39.65027-125.58327h0.151723c1.329382-6.357915 7.383851-11.169701 14.717128-11.1697 7.311602 0 13.394971 4.811786 14.717128 11.1697h0.166173l43.139898 125.58327H718.010894l0.115598 0.202297c0.693591-0.108374 1.394406-0.202297 2.131347-0.202297 7.665622 0 13.871814 6.162843 13.871814 13.741766 0 3.908673-1.654503 7.412751-4.306042 9.927017l0.101148 0.180623-110.056952 104.833347 53.543758 163.983631h-1.358281l48.869246 153.529196h72.516355l-97.536195-285.383681 200.491067-182.42881-0.195072-0.310671z" fill="#13AE67" p-id="4545"></path>
                                <path d="M378.967855 885.946547H675.67296L528.754551 637.142551z" fill="#13AE67" p-id="4546"></path>

                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header">紧急救援设备数</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value4">
                            0
                        </div>
                        <div class="layui-col-xs4 layui-col-md4 top-panel-tips">
                            <svg t="1655964552219" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                 xmlns="http://www.w3.org/2000/svg" p-id="9277" width="200" height="200">
                                <path d="M169.166503 728.463621c16.72386-16.760699 39.844394-27.086861 65.394252-27.086861 25.509949-0.004093 48.62639 10.326162 65.386065 27.086861 16.72693 16.722836 27.090954 39.84644 27.090954 65.390158 0 25.509949-10.364024 48.62946-27.090954 65.394252-16.760699 16.722836-39.881233 27.085838-65.386065 27.085838-25.550881 0-48.671415-10.363001-65.394252-27.085838-16.760699-16.764792-27.090954-39.881233-27.090954-65.394252 0-25.547811 10.330255-48.664252 27.090954-65.390158z m65.394252 19.14909a46.113155 46.113155 0 0 0-32.720151 13.528081 46.107015 46.107015 0 0 0-13.525011 32.712987c0 12.75651 5.166663 24.316777 13.525011 32.678195 8.365511 8.361418 19.924755 13.565943 32.720151 13.565943 12.75344-0.00307 24.313707-5.204525 32.674101-13.565943 8.362442-8.361418 13.562873-19.921685 13.562874-32.678195 0-12.791302-5.200432-24.351569-13.562874-32.712987-8.360395-8.365511-19.920662-13.528081-32.674101-13.528081z m489.451493-19.14909c16.760699-16.760699 39.881233-27.086861 65.393228-27.086861 25.543718-0.004093 48.664252 10.326162 65.387089 27.086861 16.767862 16.722836 27.094024 39.84644 27.094024 65.390158 0 25.509949-10.333325 48.62946-27.094024 65.394252-16.72386 16.722836-39.844394 27.085838-65.387089 27.085838-25.513019 0-48.63253-10.363001-65.393228-27.085838-16.72386-16.764792-27.086861-39.881233-27.086861-65.394252 0-25.547811 10.363001-48.664252 27.086861-65.390158z m65.393228 19.14909c-12.75651 0-24.316777 5.166663-32.678195 13.528081s-13.56185 19.921685-13.561849 32.712987c0 12.75651 5.200432 24.316777 13.561849 32.678195s19.921685 13.565943 32.678195 13.565943c12.795395-0.00307 24.347476-5.204525 32.708894-13.565943 8.369605-8.361418 13.532174-19.921685 13.532174-32.678195 0-12.791302-5.170756-24.351569-13.532174-32.712987-8.361418-8.365511-19.921685-13.528081-32.708894-13.528081zM172.902586 245.48248V221.627213c0-46.236975 37.724108-83.961082 83.927314-83.961082H520.513891c46.202183 0 83.931407 37.724108 83.931406 83.965176v23.695631h-30.827037v-23.699725c0-27.665028-22.698933-49.354983-50.364984-49.354982l-266.422353-0.004093c-27.665028 0-49.284375 21.656186-49.284375 49.363169l0.004094 23.851173h-34.648056z" fill="#4E6485" p-id="9278"></path>
                                <path d="M668.025231 815.626622H355.942023a124.03879 124.03879 0 0 0 1.922789-21.772843c0.004093-8.245785-0.847296-16.37696-2.427278-24.313706h313.083999c-1.572818 7.936747-2.423184 16.067922-2.423184 24.313706 0 7.359603 0.654915 14.644506 1.926882 21.772843z m43.583547-362.179062l-398.866563 0.270152 199.221969 130.126426 199.644594-130.396578z m84.39087-0.038886L554.118176 611.360787l147.241188 96.179334c-10.98824 11.210297-19.620834 24.237982-25.551905 38.342183L511.963161 638.910181 348.155702 745.882304a122.779102 122.779102 0 0 0-25.546788-38.342183l147.196163-96.142495-241.449639-157.950066H41.851093c-12.715577 0-23.083695-9.863629-23.083695-22.616045l0.079818-131.557006c0-12.715577 10.2883-23.04174 23.002854-23.041739l715.418539 0.037862 215.171188-98.29962c11.598129-5.279226 25.272543-0.271176 30.592701 11.289091 1.460255 3.120054 2.160195 6.668873 2.160195 9.863629l0.036839 231.164408c0 12.752416-10.371188 23.119511-23.119511 23.119511-54.331311 0-131.827158-0.036839-186.121629 0h0.011256z" fill="#4E6485" p-id="9279"></path>

                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row layui-col-space10">
        <div class="layui-col-md9">
            <div class="layui-card">
                <div class="layui-card-header">地震信息统计</div>
                <div class="layui-card-body">
                    <table id="earthquake-table" lay-filter="earthquake-table"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<!--<div>
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md10">
            <div class="layui-card">
                <div class="layui-card-header">各楼宇情况统计</div>
                <div class="layui-card-body">
                    <table id="building-table" lay-filter="building-table"></table>
                </div>
            </div>
        </div>
        <div class="layui-col-md11">
            <div class="layui-card">
                <div class="layui-card-header">应急小组分配</div>
                <div class="layui-card-body1">
                    <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                        <div id="echarts-tree" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
                    </div>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">
                    楼栋数据
                </div>
                <div class="layui-card-body">
                    <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                        <div id="echarts-bar" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>-->
<!--</div>-->

{% include 'admin/common/footer.html' %}
<script>
    //数据统计
    layui.use(['count'], function () {
        var count = layui.count

        count.up('value1', {
            time: 4000,
            num: 18,
            bit: 0,
            regulator: 50
        })

        count.up('value2', {
            time: 4000,
            num: 5,
            bit: 0,
            regulator: 50
        })

        count.up('value3', {
            time: 4000,
            num: 47,
            bit: 0,
            regulator: 50
        })

        count.up('value4', {
            time: 4000,
            bit: 0,
            num: 21,
            regulator: 50
        })

    })

    //地震信息统计
    layui.use(['table', 'form', 'jquery',  'common'], function () {
        let table = layui.table
        let form = layui.form
        let $ = layui.jquery
        let MODULE_PATH = '/admin/earth/'

        // 表格数据
        let cols = [
            [
                { title: '发震日期', field: 'create_at', templet: '#user-createTime', align: 'center' },
                { title: '经度', field: 'Longitude', align: 'center'},
                { title: '纬度', field: 'Latitude', align: 'center' },
                { title: '震源深度(Km)', field: 'Deep', align: 'center'},
                { title: '震级类型', field: 'Type', align: 'center' },
                { title: '震级', field: 'Level', align: 'center'},
                { title: '震中位置', field: 'Location', align: 'center' },
            ]
        ]

        // 渲染表格数据
        table.render({
            elem: '#earthquake-table',
            url: MODULE_PATH + 'data',
            page: true,
            cols: cols,
            skin: 'line',
            height: 'full-148',
            toolbar: '#user-toolbar', /*工具栏*/
            text: { none: '暂无信息' },
            defaultToolbar: [{ layEvent: 'refresh', icon: 'layui-icon-refresh' }, 'filter', 'print', 'exports'] /*默认工具栏*/
        })


        //
        $('.user-group').click(function () {
            let group = $(this).attr('user-group')
            let field = form.val('user-query-form')
            if (group === '-1') {
                field.deptId = group
                $(this).removeClass('button-default')
                $(this).prev().removeClass('button-primary')
                $(this).prev().addClass('button-default')
                $(this).addClass('button-primary')
            } else {
                field.deptId = group
                $(this).removeClass('button-default')
                $(this).next().removeClass('button-primary')
                $(this).next().addClass('button-default')
                $(this).addClass('button-primary')
            }
            window.refresh(field)
        })

        form.on('submit(user-query)', function (data) {
            window.refresh(data.field)
            return false
        })


        window.refresh = function (param) {
            table.reload('earthquake-table', { where: param })
        }
    })

    //楼宇情况统计
    layui.use(['table', 'form', 'jquery', 'popup', 'common'], function () {
        let table = layui.table
        let form = layui.form
        let $ = layui.jquery
        let popup = layui.popup
        let common = layui.common
        let MODULE_PATH = '/admin/earth/'

        // 表格数据
        let cols = [
            [
                { title: '楼栋名称', field: 'Name', align: 'center', width: 100 },
                { title: '总人数', field: 'Num', align: 'center', width: 80},
                { title: '总负责人', field: 'People1', align: 'center', width: 100},
                { title: '指挥小组成员', field: 'People2', align: 'center'},
            ]
        ]

        // 渲染表格数据
        table.render({
            elem: '#building-table',
            url: MODULE_PATH + 'building',
            page: true,
            cols: cols,
            skin: 'line',
            height: 'full-148',
            toolbar: '#user-toolbar', /*工具栏*/
            text: { none: '暂无信息' },
            defaultToolbar: [{ layEvent: 'refresh', icon: 'layui-icon-refresh' }, 'filter', 'print', 'exports'] /*默认工具栏*/
        })


        //
        $('.user-group').click(function () {
            let group = $(this).attr('user-group')
            let field = form.val('user-query-form')
            if (group === '-1') {
                field.deptId = group
                $(this).removeClass('button-default')
                $(this).prev().removeClass('button-primary')
                $(this).prev().addClass('button-default')
                $(this).addClass('button-primary')
            } else {
                field.deptId = group
                $(this).removeClass('button-default')
                $(this).next().removeClass('button-primary')
                $(this).next().addClass('button-default')
                $(this).addClass('button-primary')
            }
            window.refresh(field)
        })


        form.on('submit(user-query)', function (data) {
            window.refresh(data.field)
            return false
        })

        form.on('switch(user-enable)', function (obj) {
            let operate
            if (obj.elem.checked) {
                operate = 'enable'
            } else {
                operate = 'disable'
            }
            let loading = layer.load()
            $.ajax({
                url: '/admin/user/' + operate,
                data: JSON.stringify({ userId: this.value }),
                dataType: 'json',
                contentType: 'application/json',
                type: 'put',
                success: function (result) {
                    layer.close(loading)
                    if (result.success) {
                        popup.success(result.msg)
                    } else {
                        popup.failure(result.msg)
                    }
                }
            })
        })


        window.refresh = function (param) {
            table.reload('building-table', { where: param })
        }
    })

    //应急小组分配
    layui.use(['echarts'], function () {

        var echarts = layui.echarts
        var chartDom = document.getElementById('echarts-tree');
        var myChart = echarts.init(chartDom);
        var option

        myChart.showLoading();
        const data = {
            name: '应急指挥',
            children: [
                {
                    name: '总指挥部',
                    children: [
                        {
                            name: '小组1',
                            children: [
                                { name: '成员1', value: 721 },
                                { name: '成员2', value: 4294 }
                            ]
                        },
                        {
                            name: '小组2',
                            children: [
                                { name: '成员1', value: 721 },
                                { name: '成员2', value: 4294 }
                            ]
                        }
                    ]
                },
                {
                    name: '副指挥部',
                    children: [
                        { name: '成员1', value: 8833 },
                        { name: '成员2', value: 1732 },
                        { name: '成员3', value: 3623 }
                    ]
                },
                {
                    name: '现场救援部门',
                    children: [
                        { name: '小组1', value: 1616 },
                        { name: '小组2', value: 1027 },
                        { name: '小组3', value: 3891 },
                        { name: '小组4', value: 891 }
                    ]
                },
                {
                    name: '资源调度部门',
                    children: [
                        { name: '小组1', value: 2105 },
                        { name: '小组2', value: 1316 },
                        { name: '小组3', value: 3151 }
                    ]
                }
            ]
        };

        myChart.hideLoading();
        myChart.setOption(
            (option = {
                tooltip: {
                    trigger: 'item',
                    triggerOn: 'mousemove'
                },
                legend: {
                    top: '2%',
                    left: '3%',
                    orient: 'vertical',
                    data: [
                        {
                            name: '部门',
                            icon: 'rectangle'
                        }
                    ],
                    borderColor: '#c23531'
                },
                series: [
                    {
                        type: 'tree',
                        name: '部门',
                        data: [data],
                        top: '5%',
                        left: '30%',
                        bottom: '2%',
                        right: '35%',
                        symbolSize: 7,
                        label: {
                            position: 'left',
                            verticalAlign: 'middle',
                            align: 'right'
                        },
                        leaves: {
                            label: {
                                position: 'right',
                                verticalAlign: 'middle',
                                align: 'left'
                            }
                        },
                        emphasis: {
                            focus: 'descendant'
                        },
                        expandAndCollapse: true,
                        animationDuration: 550,
                        animationDurationUpdate: 750
                    }
                ]
            })
        );


        option && myChart.setOption(option);

        window.onresize = function () {
            myChart.resize()
        }

    })

    //楼栋情况
    layui.use(['echarts'], function () {
        var echarts = layui.echarts

        var chartDom = document.getElementById('echarts-bar');
        var myChart = echarts.init(chartDom);
        var option
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    // Use axis to trigger tooltip
                    type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                }
            },
            legend: {},
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            yAxis: {
                type: 'value'
            },
            xAxis: {
                type: 'category',
                data: ['楼1', '楼2', '楼3', '楼4', '楼5', '楼6', '楼7']
            },
            series: [
                {
                    name: '人数',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [120, 302, 301, 334, 390, 330, 100]
                },
                {
                    name: '层数',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [5, 5, 8, 7, 6, 6, 6]
                },
                {
                    name: '紧急出口数',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [4, 7, 7, 6, 6, 5, 6]
                },
                {
                    name: '疏散指挥人员数',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [5, 10, 10, 10, 10, 10, 5]
                }
            ]
        };

        option && myChart.setOption(option);

        window.onresize = function () {
            myChart.resize()
        }

    })
</script>
</body>
</html>